import React ,{ useState }from 'react'
import "./index.css"
export default function Item({ todo, done, id, setTodoList, todoList }) {
    const [isActive,setIsActive] = useState(false)
    //鼠标移入li事件函数
    const mouseHandle = (bool)=>{
        return () => {
            setIsActive(bool)
          }

    }  
     //多选框触发改变的事件函数
     const checkChangeHandle =(e)=>{
      const newTodoList = todoList.map(item =>{
        if (item.id === id) {
          return { ...item, done: e.target.checked }
        }
        return { ...item }
      })
      setTodoList(newTodoList);
     }
       //删除事件的回调函数
  const deleteHandle = () => {
    const newTodoList = todoList.filter(item => {
      return item.id !== id
    })
    setTodoList(newTodoList)
  }

  return (
    <li onMouseEnter={mouseHandle(true)}
        onMouseLeave={mouseHandle(false)}
        className={isActive ? "active" : ""}
    
    
    
    >
    <label>
      <input type="checkbox" checked={done} onChange={checkChangeHandle}/>
      <span>{todo}</span>
    </label>
    <button onClick={deleteHandle} className="btn btn-danger" style={{ display: isActive ? "block" : "none" }}>删除</button>
  </li>
  )
}
